<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";
import { ref, onMounted, defineProps } from "vue";
const emit = defineEmits(["changePosition"]);
// const isOpen = ref(false);
let map = shallowRef(null); // 在setup中声明map变量
let markers = []; // 用于存储所有标记的数组
// defineExpose({
//   isOpen,
// });
window._AMapSecurityConfig = {
  securityJsCode: "e4630e5b5791f7ec01f5feabf11c1c42",
};

const initMap = () => {
  AMapLoader.load({
    key: "a5057a7402cfb77ca6eb8379fdd0bfb6", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.ToolBar", "AMap.Driving"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        //设置地图容器id
        viewMode: "3D", //是否为3D地图模式
        zoom: 14,
        // zooms: [2, 22],        //初始化地图级别
        center: [117.176635, 31.740654], //初始化地图中心点位置
      });
      let positionArr = [[117.176635, 31.740654]];
      for (let item of positionArr) {
        let marker = new AMap.Marker({
          position: [item[0], item[1]],
        });
        markers.push(marker);
        map.add(marker);
      }

      // 添加地图点击事件监听器
      map.on("click", (event) => {
        const lngLat = event.lnglat;
        // 经纬度
        // console.log("Clicked at:", lngLat.lat, lngLat.lng);
        emit("changePosition", `${lngLat.lat},${lngLat.lng}`);

        // 移除之前的标记
        markers.forEach((marker) => marker.setMap(null));

        // 在点击位置添加新的标记
        const newMarker = new AMap.Marker({
          position: [lngLat.lng, lngLat.lat],
        });
        markers.push(newMarker);
        map.add(newMarker);
        console.log(newMarker.position);
      });
    })
    .catch((e) => {
      console.log(e);
    });
};

// const confirm = () => {
//   // 在确定按钮点击时触发自定义事件
//   emit("changePosition", `${lngLat.lat},${lngLat.lng}`);
//   isOpen.value = false;
// };

// const mapInfo = (event) => {
//   console.log(event);
// }
onMounted(() => {
  initMap();
});
</script>

<template>
  <div id="container"></div>
  <br />
  <!-- <div style="margin-left: 80%; margin-top: 30px">
    <el-button type="primary" @click="confirm">确定</el-button>
    <el-button @click="isOpen = false">取消</el-button>
  </div> -->
</template>

<style lang="scss" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 500px;
}
</style>
